<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>前端开发-喻峰-2020应届生-计算机专业</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }

    #img img {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }

    @media print {
      #skills {
        display: none;
      }
    }


    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs {}

    .jobs>h2 {}

    .jobs>ol {}

    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }

      .jobs header {
        flex-direction: column;
      }

      .jobs header>h3,
      .jobs header>h4,
      .jobs header>span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>喻峰</h1>
      <a href="https://sm.ms/image/mR5YfQlIOHqwoMy" target="_blank"><img
          src="https://i.loli.net/2020/06/16/HKNWTOjevzApXwc.jpg" width="120"></a>
      <p>
        2020年应届生 | 22岁 | 数字媒体技术 | 河南牧业经济学院 | 本科 | 现居河南信阳 | 前端开发
      </p>
      <p>
        手机：<a href="tel:17601439446" target="_blank">17601439446</a> | 微信：vue000 | 邮箱：<a
          href="mailto:vue000@hotmail.com" target="_blank">vue000@hotmail.com</a>
      </p>
      <p> Github: <a href="https://github.com/yf2050" target="_blank">https://github.com/yf2050</a></p>
      <p>写博客: <a href="https://blog.csdn.net/abc465200" target="_blank">https://blog.csdn.net/abc465200</a> 原创文章30篇</p>
    </section>

    <section class="skills">
      <h2>掌握技能</h2>
      <div class="wrapper">
        <ul>
          <ul>
            <li>● 熟悉HTML(5)和常用CSS(3),<strong>文档流</strong>、<strong>盒模型</strong>、Flex和Grid布局、CSS3动画、过渡</li>
            <li>● 熟悉<strong>移动端</strong>兼容，有相关响应式开发经验</li>
            <li>● 熟悉原生JavaScript，<strong>原型prototype</strong>、闭包、事件冒泡和捕获、事件委托、数组splice()等API</li>
            <li>● 熟悉前后端分离原理，AJAX四步骤、跨域CORS和JSONP、前端路由</li>
            <li>● 熟悉命令行和使用<strong>Git</strong>进行版本控制和协作开发 && Npm && Yarn</li>
            <li>● 了解ES6语法，let、<strong>Promise</strong>、<strong>this</strong>、析构赋值</li>
            <li>● 了解axios库，JSON数据存储格式</li>
            <li>● 了解前程模块化、<strong>webpack</strong>和parcel等前端打包类工具，loader、Plugin的配置和优化</li>
            <li>● 了解<strong>HTTP</strong>协议及浏览器工作原理，并进行前端性能优化，略懂后端，可以写点 PHP 和 Node.js</li>
          </ul>
        </ul>
    </section>
    <section class="skills">
      <h2>其他技能</h2>
      <div class="wrapper">
        <ul>
          <ul>
            <ul>
              <li>● 在日常使用中，能够利用Chrome dev tools进行简单的项目调试,能够<strong>科学上网</strong>。</li>
              <li>● 熟悉Vscode、Webstrom编辑器以及使用MarkDown进行文档的写作。</li>
              <li>● 能用PS进行前端页面所需的切图，熟悉PR、PS、AI、AE、AU</li>
            </ul>
          </ul>
        </ul>
    </section>




    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>△基于H5的大学生心理健康网 (毕设)</h3>
            <span>
              <a href="http://yufeng.xiao369369369.cn/" target="_blank">作品链接</a>
            </span>
          </header>
          <div id=img><img src="./images/a.png" alt="" width="200px"></div>
          <p>● 这是一个基于前端和后端搭建的线上多页面网站。</p>
          <p>
            ● 在大学中未安排数据库课程情况下，自学Mysql数据库的建表、Sql语句的增删改查,了解前后端逻辑。

          </p>
          <p>
            ● 网站用动态语言和<strong>flex布局</strong>编写完成后，进行了<strong>阿里云服务器和域名搭配</strong>，现于宝塔上进行管理访问。

          </p>
          <p>
            ● 主要功能包括注册登录、留言功能、视频图片展示、后台管理系统、移动端兼容在宽500px以下等。
          </p>
        </li>
        <li>
          <header>
            <h3>△画一个皮卡丘</h3>
            <span>
              <a href="https://github.com/yf2050/make-pika">Github</a>
              <a href="https://yf2050.github.io/make-pika/dist/index.html" target="_blank">作品链接</a>
            </span>
          </header>
          <div id=img><img src="./images/b.png" alt="" width="200px"></div>
          <p>
            ● 这个项目动态演示绘制皮卡丘，并可以进行速度控制，以中间布局，左右对称。
          </p>
          <p>
            ● 大量使用伪元素、<strong>CSS3和ES6</strong>、相对定位、监听绑定和取消监听、webpack打包等
          </p>
        </li>
        <li>
          <header>
            <h3>△一个键盘导航网站</h3>
            <span>
              <a href="https://github.com/yf2050/nav-1">Github</a>
              <a href="https://yf2050.github.io/nav-1/dist/index.html" target="_blank">作品链接</a>
            </span>
          </header>
          <div id=img><img src="./images/c.png" alt="" width="200px"></div>
          <p>
            ● 这个项目使用<strong>原生JavaScript</strong>，监听键盘事件，实现一个可自定义的导航网。
          </p>

          <p>
            ● 同时加入了<strong>百度搜索</strong>功能，加深了对浏览器<strong>LocalStorage</strong>的理解
          </p>
          <p>
            ● 技术栈: JavaScript + HTML5 + LocalStorage + CSS3 + Media queries
          </p>
        </li>
        <li>
          <header>
            <h3>△Canvas画板</h3>
            <span>
              <a href="https://github.com/yf2050/canvas-demo-1">Github</a>
              <a href="https://yf2050.github.io/canvas-demo-1/index.html" target="_blank">作品链接</a>
            </span>
          </header>
          <div id=img><img src="./images/d.png" alt="" width="200px"></div>
          <p>
            ● 使用HTML5的<strong>Canvas</strong>标签，实现的画板项目，对移动端兼容进行了实践。 </p>

          <p>
            ● 能在<strong>桌面端</strong>和<strong>移动端</strong>使用，可以图像形式保存画板内容。
          </p>
          <p>
            ● 技术栈: JavaScript + HTML5 + Canvas + CSS3
          </p>
        </li>
        <li>
          <header>
            <h3>△自己封装简单DOM库</h3>
            <span>
              <a href="https://github.com/yf2050/dom-1" target="_blank">作品链接</a>
            </span>
          </header>
          <p style="margin-top: 5px;">
            ● 实现元素选择、元素创建、元素删除、元素修改、<strong>事件委托</strong>、节点排名等常见功能</p>
          </p>
        </li>
      </ol>
    </section>

    <section class="jobs">
      <h2>实习经历</h2>
      <ol>
        <li>
          <header>
            <h3>湖北小黑课堂教育科技有限公司</h3>
            <h4>运营</h4>
            <span><time>2019年11月</time>~<time>2020年4月</time></span>
          </header>
          <ul>
            <li>
              l 负责本校线上运营社群，帮助同学解决计算机二级相关问题。 </li>
            <li>
              l 期间联系校园墙和各班级负责人建群协作，资源共享，帮助几百位校友自学二级课程。

            </li>
            <li>
              l 积极完成实习任务，个人能力突出，实习结束时被评为“小黑课堂优秀实习生”。 </li>
          </ul>
        </li>
      </ol>
    </section>

    <section class="jobs">
      <h2>校园经历</h2>
      <ol>
        <li>

          <ul>
            <li>
              l 在校参加院校书画小组并担任小组组长，协助老师组织安排校园活动。 </li>
            <li>
              l 在校参加网易校园自媒体"百人计划"，发布文章浏览量破万，获得“网易优秀小编”荣誉。
            <li>
              l 在校获得校园书画大赛二等奖、计算机操作员、计算机二级证书、 校园营销大赛优秀奖等。 </li>
        </li>
        </ul>
        </li>
      </ol>
    </section>
    <section class="others">
      <h2>自我评价</h2>
      <ul>
        <li>本人大二起学前端，积累一些开发经验，用过各类主流前端技术栈。</li>
        <li>关注互联网前沿技术，爱倒腾，经常浏览MDN和优秀博客，学无止境。</li>
      </ul>
    </section>

  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="../main.js"></script>
</body>

</html>